/* box */
.box{ position: absolute; left: 0; top: 60px; bottom: 0; right: 0; }
.img{ width: 100%; height: 100%;}
.img img{width: 100%; height: 100%;}

/*实时数据*/
.realtime{ width: 38px; display: block;  padding:22px 0; background: url(../images/realtimeBg.png) no-repeat; position: absolute; left: 0px; top:70px;cursor: pointer;z-index:3;}
.realtime p{font-size: 14px; color:#fff; text-align: center;}
.openData{ width: 420px; position: absolute; left: 0; bottom: 0;top: 0px;background-color: #1b1b1b; z-index: 4;}
.openHistoryData{}

.title{border-bottom: solid 1px #343434; padding: 1px 1px; position: relative;}
.tlHeader{font-size: 16px;margin-left: 10px;line-height: 40px;color: #fff;}
.switchBox{ margin: 12px 15px 0 20px;}
.witch{ display: inline-block; vertical-align: -3px;}
.switch-btn {position: relative; display: block; vertical-align: top; width: 37px;height: 20px;border-radius: 10px; cursor: pointer;}
.checked-switch {position: absolute; top: 0; left: 0; opacity: 0;}
.text-switch {background-image: linear-gradient(0deg, #5a5a5a 0%, #bebebe 100%); border-radius: inherit; color: #fff; display: block; font-size: 15px; height: inherit; position: relative; text-transform: uppercase;}
.checked-switch:checked ~ .text-switch {background-image: linear-gradient(0deg, #49d58b 0%, #006a32 100%);}
.checked-switch:checked ~ .text-switch:before {opacity: 0;}
.checked-switch:checked ~ .text-switch:after {opacity: 1;}
.checked-switch:checked ~ .toggle-btn{ background-color: #ffffff;}
.toggle-btn {background-color: #ffffff; border-radius: 100%; width: 16px; height: 16px; left: 2px; position: absolute; top: 2px; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);}
.checked-switch:checked ~ .toggle-btn {left: 20px;}
.text-switch, .toggle-btn {transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease;}
.synchro{display: block; margin-top: 7px; position: relative;}
.fit{margin: 7px 0 0 15px;}
.retract{display: block; color:#fff; position: absolute; right: 15px; top: 50%; margin-top: -10px; cursor: pointer;}
.retractLeft{display: block;color:#fff; position: absolute; left: 100px; top: 50%; margin-top: -10px; cursor: pointer;}

.time{font-size: 14px;color: #ffdd22; text-align: center;padding:5px 0 5px 0; position: relative;}
.gasTab{background-color: #313131;}
.gasTab thead {background-color: #313131; border: none; width: 100%;  height: 36px; width: 100% ;display: table; table-layout: fixed;}
.gasTab th, .gasTab td { height: 35px; display: table-cell; vertical-align: middle;text-align: center;}
.gasTab thead th {padding: 0 3px; font-size: 14px; color: #e2dede;}
.gasTab tbody { display: block; max-height: 575px; overflow-y: auto;overflow-x: hidden;}
.gasTab tbody tr { display: table; width: 100%;table-layout: fixed;}
.gasTab tbody tr td {padding: 0px 3px;display: table-cell; vertical-align: middle; font-size: 14px; color: #959595; }
.gasTab tbody {background-color: #1b1b1b;}
.gasTab tbody tr{border-bottom: 1px solid #343434;}
.gasTab thead th:first-child {width: 40px;}
.gasTab tbody td:first-child {width: 40px; text-align: center;border-left:none;}
.gasTab thead th span{width: 14px;height: 14px;border: solid 1px #ffffff; display: block; border-radius: 100%; margin: 0 auto;}
.gasTab tbody td span{width: 16px;height: 16px;background-color: #a6a6a6;display: block;border-radius: 100%;margin: 0 auto;}
.gasTab tbody td span.red{ background-color: #e7383b;}
.gasTab tbody td span.green{ background-color: #49d58b;}
.gasTab tbody td span.grey{ background-color: #a6a6a6;}
.gasTab tbody td span.yellow{ background-color: #f8da35;}
.gasTab tbody tr.police{ box-shadow: inset 0px 0px 10px #ff0000;}
.gasTab tbody tr.police td{color: #ff3b3e;}
.gasTab tbody td span.electricity{width:18px; height: 10px; display: block; background: url(../images/electricityIcon.png) no-repeat; margin: 0 auto; border-radius: 0;}

/*安防物资*/
.material{ width: 38px;box-sizing: initial; display: block;  padding:22px 0; background: url(../images/rightBg.png) no-repeat; position: absolute; right: 0px; top:10px;cursor: pointer;z-index:3;}
.material p{font-size: 14px; color:#fff; text-align: center;}
.materialData{ width: 400px; min-height:600px; position: absolute; right: 48px; top: 40px;background-color: #1b1b1b; z-index: 4; border-radius: 8px; }
.mdTop{height: 40px;background-color: #e7383b;line-height: 40px; color: #fff; padding:0 20px;font-size: 18px; border-radius: 8px 8px 0 0; position: relative;}
.mdTop span.stop{display: block;color:#fff; position: absolute; right: 15px; top: 5px;cursor: pointer;}


.materialTab thead { border: none; width: 100%;  height: 35px; display: table; table-layout: fixed;}
.materialTab thead tr:first-child{background-color: #313131;}
.materialTab th, .materialTab td { height: 35px; display: table-cell; vertical-align: middle;}
.materialTab thead th {padding: 0 3px; font-size: 12px; color: #e3e3e3;text-align: center;border-bottom: 1px solid #343434;}
.materialTab tbody { display: block; max-height: 575px; overflow-y: auto;overflow-x: hidden;}
.materialTab tbody tr { display: table; width: 100%;table-layout: fixed;}
.materialTab tbody tr:hover{ border-left:3px solid #e7383b;cursor: progress;}
.materialTab tbody tr:hover td{color: #fff;}
.materialTab tbody tr td {padding: 0px 3px;display: table-cell; vertical-align: middle; font-size: 14px; color: #959595; text-align: center;}
.materialTab tbody {background-color: #1b1b1b; }
.materialTab tbody tr{border-bottom: 1px solid #343434;}
.materialTab tbody td:first-child { text-align: center;border-left:none;}
.materialTab tbody tr.police{ box-shadow: inset 0px 0px 10px #ff0000;}
.materialTab tbody tr.police td{color: #ff3b3e;}

/* 历史数据 */
.history{ position: absolute; right: 0; bottom: 0;top: 0px;left:422px; background-color: #1b1b1b; z-index: 100;}
.data{border: 1px solid #515151;border-radius: 6px; min-width:132px; position: absolute; left: 50%;margin-left: -80px;top: 65px;}
.data ul li{ float: left;color: #fff; display: block; padding: 5px 10px; cursor: pointer;}
.data ul li.onlike.bordL{ border-radius:6px 0px 0px 6px;}
.data ul li.onlike.bordR{ border-radius:0px 6px 6px 0px;}
.data ul li.onlike{ background-color: #a0acbf;  color: #333;}

.gasMain{ margin-top: 55px;padding:0 20px;margin-right: 50px}
.gasTabs{ padding: 20px 0; margin: 0 auto; width: 1010px;}
.timeBox{ font-size: 14px; color: #fff; line-height: 30px;}
.term { margin-right: 20px;}
.timeFrom{ width: 170px; height: 28px; border:1px solid #343434; padding: 0 5px;}
.w100.timeFrom{width:100px;}
.timeFrom .inday{ width:100%;box-sizing: border-box; border:none; background: none; height: 28px; font-size: 14px;font-family: "微软雅黑"; color: #c3c2c3; line-height: 28px;}
.mlr10{ margin-left: 5px; margin-right: 5px;}
.treeTop i{ font-style: normal;}
.treeTop i.sbNumber{color: #c3c2c3;}
.treedeviceID{position: relative; background-color: none;}
.treeTop{ width: 110px; height: 28px; line-height: 28px;  border:1px solid #343434; padding: 0 30px 0 10px; color: #333; position: relative;overflow: hidden;}
.treeTop .downArr{ width: 20px; height: 20px; display: block;position: absolute; right: 10px; top: 3px; cursor: pointer;}
.treeTop .downArr:after{width:0px;content: ""; display: block;height:0px; border-top:6px solid #807e7e; border-left:6px solid transparent;  border-right:6px solid transparent; position: absolute; right: 0px; top: 7px;}
.option{ width: 110px; min-height: 30px; border:1px solid #d3d3d3; position: absolute; top: 29px; left: 0; z-index: 2; background-color: #fff; max-height: 400px; overflow: auto;}
.option ul li{ line-height: 28px; color: #666; padding: 0 10px; cursor: pointer; font-size: 14px;}
.option ul li:hover{ color: #fff; background-color: #1b1b1b;}
.option.zindex{ z-index: 4;}

.query{ width: 100px; display: block;position: relative;background-color: #15a4fa;}
.query a span{ display: inline-block; margin-right: 4px;vertical-align: 1px; width: 16px; height: 16px;}
.query a{ width: 100%; background-color: #15a4fa; display: block; text-align: center; line-height: 28px; color: #fff;cursor: pointer;}
.query a:hover{background-color: #3eb2f7;}

/*气体数据*/
.gasList thead tr th{background-color: #313131;color: #f0f0f0;padding: 0px 2px; height: 30px; line-height: 30px; font-size: 14px;text-align: center;min-width: 40px;}
.gasList tr td{min-width: 40px; color: #f0f0f0; text-align: center; box-sizing:border-box;-moz-box-sizing:border-box; white-space: nowrap; min-width: 40px; padding: 0px 2px; height: 30px; line-height: 30px; font-size: 14px;}
.gasList tr td{ border-bottom: 1px solid #343434;}
.gasList tr td.red{ color: #e7383b;}
.gasList tr td.green{ color: #49d58b;}
.gasList tr td.grey{ color: #a6a6a6;}
.gasList tr td.yellow{ color: #f8da35;}

.chart .gasTabs {width: 600px;}
.chartDiv{ width: 100%; margin: 0 auto;}
.chartDivLeft{ width: 120px; margin-right: 20px;}
.chartDivLeft dl dt{ color: #f0f0f0; padding: 10px 10px;}
.chartDivLeft dl dt i{ width: 8px; height: 8px; display: inline-block; border-radius: 100%; background-color: #fff; margin-right: 5px; vertical-align: 0px;}
.chartDivLeft dl dd{ color: #fff; padding: 5px 10px 5px 22px; cursor: pointer;}
.chartDivLeft dl dd:hover{ background-color: #313131; color: #ff3b3e;}
.chartDivRight{ display: block; overflow: hidden; background-color: #252424; height: 480px; padding: 10px 10px;}

/* 分页 */
.gasPage{ text-align: center; clear: both; overflow: hidden;padding-top: 20px;  width:100%; }
.gasPage a{ display: inline-block; width:20px; height: 20px; border:1px solid #d3d3d3; text-align: center;  color: #999;  margin: 0 2px; position: relative; font-size: 14px;cursor: pointer;}
.gasPage a.onlink{ background-color: #00aaff; color: #fff; border:none; width: 20px; height: 20px; border:1px solid #00aaff;}
.gasPage a:hover{ background-color: #00aaff; color: #fff; border:none; width: 20px; height: 20px; border:1px solid #00aaff;}
.gasPage a.front:hover,.gasPage a.after:hover{ width:20px; height: 20px; border:1px solid #d3d3d3; text-align: center; color: #1c2736; background-color: #fff;}
.gasPage a.front,.gasPage a.after{ display: inline-block; position: relative;width:20px; height: 20px; border:1px solid #d3d3d3; text-align: center;  color: #1c2736; vertical-align: -4px; margin: 0 2px; cursor: pointer;}
.gasPage a.front span{ display: inline-block; width: 8px; height: 8px; vertical-align: middle; border-left: 2px solid #999; border-bottom: 2px solid #999; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); box-sizing: border-box; position: absolute; top: 50%; right: 50%; margin-top: -2px;  margin-right: -2px;}
.gasPage a.after span{display: inline-block; width: 8px; height: 8px; vertical-align: middle; border-right: 2px solid #999; border-top: 2px solid #999; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); box-sizing: border-box; position: absolute; top: 50%; right: 50%; margin-top: -2px;}

/* 设置弹出框 */
.gasPage{ text-align: center; clear: both; overflow: hidden;padding-top: 20px;  width:100%; }
.gasPage a{ display: inline-block; width:20px; height: 20px; border:1px solid #d3d3d3; text-align: center;  color: #999;  margin: 0 2px; position: relative; font-size: 14px;cursor: pointer;}
.gasPage a.onlink{ background-color: #00aaff; color: #fff; border:none; width: 20px; height: 20px; border:1px solid #00aaff;}
.gasPage a:hover{ background-color: #00aaff; color: #fff; border:none; width: 20px; height: 20px; border:1px solid #00aaff;}
.gasPage a.front:hover,.gasPage a.after:hover{ width:20px; height: 20px; border:1px solid #d3d3d3; text-align: center; color: #1c2736; background-color: #fff;}
.gasPage a.front,.gasPage a.after{ display: inline-block; position: relative;width:20px; height: 20px; border:1px solid #d3d3d3; text-align: center;  color: #1c2736; vertical-align: -4px; margin: 0 2px; cursor: pointer;}
.gasPage a.front span{ display: inline-block; width: 8px; height: 8px; vertical-align: middle; border-left: 2px solid #999; border-bottom: 2px solid #999; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); box-sizing: border-box; position: absolute; top: 50%; right: 50%; margin-top: -2px;  margin-right: -2px;}
.gasPage a.after span{display: inline-block; width: 8px; height: 8px; vertical-align: middle; border-right: 2px solid #999; border-top: 2px solid #999; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); box-sizing: border-box; position: absolute; top: 50%; right: 50%; margin-top: -2px;}

/* 设置弹出框 */
.frameWarp{background-color: #272626;border-radius: 10px;width: 550px;position: absolute;top: 50%;left: 50%;margin-left: -300px;margin-top: -300px;z-index: 300;}
.videoBox{ position: relative;}
.videoMain{width: 136px;height: 370px;background-color: #272626;box-shadow: 5px 0px 5px 0px rgba(20, 21, 23, 0.4);border-radius: 10px;position: relative;}
.videoNav ul{padding-top: 34px;}
.videoNav ul li a{font-size: 14px;color: #a0acbf;line-height: 20px;display: block;padding: 15px 20px;}
.videoNav ul li a i{width: 20px;height: 20px;display: inline-block;margin-right: 10px;position: relative;}
.videoNav ul li a i:before{content: "";width: 18px;height: 18px;display: none;background: url(../images/liBg.png) no-repeat;background-size: 18px;position: absolute;top: 5px;left: 0;}
.videoNav ul li.onActive a{ color: #15a4fa;}
.videoNav ul li.onActive a i:before{ display: block;}
.videoNav ul li a:hover{ color: #15a4fa;}
.videoNav ul li a:hover i:before{ display: block;}

.onOff{position: absolute;bottom: 40px;left: 40px;}
.onOff i{ width: 58px; height: 58px; display: block; cursor: pointer;}
.onOff i.shutIcon{ background: url(../images/shut.png) no-repeat;}
.onOff i.openIcon{background: url(../images/openkey.png) no-repeat;} 

.contBox{padding-top: 60px;position: relative;height: 370px;float: left;width: 410px;}
.tab{ width: 335px; margin: 0 auto;}
.tab ul li{ width: 81px; height: 34px; background-color: #31363f; float: left; margin-right: 2px; line-height: 34px; color: #a0acbf; font-size: 14px; text-align: center; cursor: pointer;}
.tab ul li.onLink{ background-color: #ffdd1e; color: #20232a;}
.tab ul li:hover{background-color: #ffdd1e; color: #20232a;}
.inBox{width: 200px;height: 32px;border: solid 1px #343434;float: left;padding: 0 5px;}
.inBox input{width:100%;border:none;background: none;height: 30px;font-size: 14px;font-family: "微软雅黑";color: #c3c2c3;line-height: 22px;padding: 5px 0;}
.btnDiv{ text-align: center;}
.btnDiv a{color: #a0acbf;display: inline-block;padding: 6px 25px;border: 1px solid #343434;border-radius: 4px;margin-right: 10px;cursor: pointer;}
.btnDiv a:hover{background-color: #15a4fa;border: 1px solid #15a4fa;color: #fff;}
.closeUp{ width: 34px; height: 34px; background-color: #e95353; position: absolute; top: 0; right: 30px; cursor: pointer;}
.closeUp i{width: 34px; height: 34px; display: block; text-align: center; line-height: 34px;}
.closeUp:hover{ background-color: #f77777;}
.line34{ line-height: 34px;}
.inBox.w320{width: 320px;}
.mb10{ margin-bottom: 10px;}
.testing{width: 394px;margin: 0 auto;padding-top: 20px;padding-bottom: 120px;}
.label{min-width: 100px;max-width: 120px;color: #a0acbf;display: block;margin-right: 20px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;text-align: right;}
.mouth{width: 220px;position: relative;padding: 6px 10px;border: 1px solid #343434;}
.selHd i{color: #a0acbf; font-size: 14px; position: relative; font-style: normal;display: inline-block;line-height: 20px;}
.pgDn{ width: 40px; height: 32px; display: block; position: absolute; top: 0; right: 0; z-index: 2; cursor: pointer;}
.pgDn:after{content: ""; width: 11px; height: 7px; display: inline-block; background: url(../images/down.png) no-repeat; position: absolute; top: 13px; left: 15px;}
.selTion{width: 220px;min-height: 30px;border: 1px solid #343434;position: absolute;top: 32px;left: -1px;z-index: 2;background-color: #313131;}
.selTion ul li{ line-height: 28px; color: #687381; padding: 0 10px; cursor: pointer;}
.selTion ul li:hover{color: #fff;background-color: #403e3e;}
.secs{font-size: 14px; color: #a0acbf; display: inline-block; margin-left: 5px; line-height: 40px;}
.txtc{text-align: center;}

/* 数据环形图 */
.loading { width: 28px; height: 28px; position: absolute;top:0; left:0;z-index: 2;}
.loadingDiv{width: 100%; height: 100%; position: relative;}
.loading .progress {position: absolute;width: 22px;height: 22px;background-color: #1b1b1b;border-radius: 50%;left: 3px;top: 3px;line-height: 22px;text-align: center;font-size: 12px;color:#fff;}
.left,.right { width: 14px; height: 28px; overflow: hidden; position: relative;float: left;background-color: #D2D2D2;}
.left {border-radius: 28px 0 0 28px;}
 .right { border-radius: 0 28px 28px 0;}
.left:after{content: ""; position: absolute; display: block; width: 14px;height: 28px; border-radius: 28px 0 0 28px; background-color: #e7383b;}
.right:after { content: ""; position: absolute;display: block;width: 14px;height: 28px; border-radius: 0 28px 28px 0;background-color: #e7383b;}
.left:after { transform-origin: right center;transform: rotateZ(-144deg);}
.right:after {transform-origin: left center; transform: rotateZ(0deg);}


